<template>
    <div class="layer">
        <div class="left">
            <ul class="tool">
                <el-tooltip effect="light" content="放大" placement="bottom">
                    <li class="tool-item" @click="zoomIn">
                        <i class="el-icon-zoom-in" />
                    </li>
                </el-tooltip>
                <el-tooltip effect="light" content="缩小" placement="bottom">
                    <li class="tool-item" @click="zoomOut">
                        <i class="el-icon-zoom-out" />
                    </li>
                </el-tooltip>
                <el-tooltip effect="light" content="重置" placement="bottom">
                    <li class="tool-item" @click="reset"><i class="el-icon-aim" /></li>
                </el-tooltip>
                <el-tooltip effect="light" content="显示网格" placement="bottom">
                    <li class="tool-item" @click="showGraticule">
                        <svg-icon icon-class="show-grid"></svg-icon>
                    </li>
                </el-tooltip>
                <el-tooltip effect="light" content="移除网格" placement="bottom">
                    <li class="tool-item" @click="removeGraticule">
                        <svg-icon icon-class="hide-grid"></svg-icon>
                    </li>
                </el-tooltip>
            </ul>
            <div class="ctrl-box">
                <div class="ctrl-item">
                    <label for="">将中心点移动到指定位置</label>
                    <el-input placeholder="请输入经纬度" v-model="lonlat">
                        <el-button slot="append" icon="el-icon-search" @click="moveToLonlat"></el-button>
                    </el-input>
                </div>
                <div class="ctrl-item">
                    <label for="">缩放到指定层级</label>
                    <div>
                        <el-input placeholder="请输入经纬度" v-model="zoom">
                            <el-button slot="append" @click="setZoom">缩放</el-button>
                        </el-input>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <!-- 创建图层 -->
            <div id="map"></div>
            <div id="mouse-position">位置：</div>
        </div>
    </div>
</template>

<script>
import olMap from '../../util/lmap/lmap.js' // 引入地图包对象
export default {
    components: {},
    data() {
        return {
            lonlat: '',
            zoom: '',
            graticule: null
        }
    },
    methods: {
        // 缩小
        zoomOut() {
            olMap.utils.zoomOut(olMap.map)
        },
        // 放大
        zoomIn() {
            olMap.utils.zoomIn(olMap.map)
        },
        // 重置
        reset() {
            olMap.utils.flyTo(olMap.map, [255.4745, 39.7077], 4)
        },
        // 移动到指定位置
        moveToLonlat() {
            if (this.lonlat === '') {
                this.$message({
                    message: '请输入经纬度',
                    type: 'error'
                })
                return
            }
            let zoom = olMap.utils.getZoom(olMap.map)
            console.log(this.lonlat.split(','), zoom)
            olMap.utils.flyTo(olMap.map, this.lonlat.split(','), zoom)
        },
        // 缩放到指定层级
        setZoom() {
            if (this.zoom === '') {
                this.$message({
                    message: '请输入层级',
                    type: 'error'
                })
                return
            }
            olMap.utils.setCurZoom(olMap.map, this.zoom)
        },
        // 显示网格
        showGraticule() {
            if (this.graticule) {
                return
            }
            this.graticule = olMap.utils.addGraticule(olMap.map)
        },
        // 移除网格
        removeGraticule() {
            olMap.utils.removeGraticule(this.graticule)
            this.graticule = null
        }
    },
    mounted() {
        let layer = olMap.createWmtsMap()
        olMap.createMap('map') // 调用创建图层方法，创建图层
        olMap.map.addLayer(layer) // layer添加到map对象上
        console.log(olMap.map.getLayers())
        olMap.map.addControl(olMap.utils.showMousePosition('mouse-position'))
        olMap.map.on('click', function (e) {
            console.log(e)
            console.log('66', olMap.utils.getZoom(olMap.map))
        })
    }
}
</script>

<style scoped lang="less">
@bd-bg: #55aaff;

#map {
    width: 100%;
    height: 100%;
}

.tool {
    display: flex;
    // margin: 10px 0 10px 10px ;
    .tool-item {
        display: flex;
        padding: 5px 10px;
        // border: 1px solid @bd-bg;
        cursor: pointer;
        border-right: none;

        &:last-child {
            // border-right: 1px solid @bd-bg;
        }
    }
}

/deep/.el-input {
    // width: 200px;
}

.ctrl-box {
    width: 100%;
    // border: 1px solid @bd-bg;
    border-top: 1px solid @bd-bg;

    .ctrl-item {
        padding: 5px;
        margin-bottom: 10px;
        border-bottom: 1px solid @bd-bg;
        // display: flex;
        align-items: center;

        label {
            display: inline-block;
            // width: 100px;
            margin: 5px 0;
        }
    }
}

.layer {
    display: flex;
    height: 100%;

    .left {
        width: 350px;
        height: 100%;
        border-right: 1px solid @bd-bg;
    }

    .right {
        flex: 1 1 auto;
    }
}

#mouse-position {
    position: absolute;
    top: 0;
    color: @bd-bg;
}
</style>
